import styles from './file.less';
import cls from 'classnames';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'umi';
import ArticleListReadPage from "../../components/PublicList";
import { cycle } from "../../utils/cycle";
import { IBrochureArticleModelState } from '@/models/brochure/brochureEffect';

export default function Knowledge() {
  const dispatch = useDispatch();

  // const store = useSelector(state=>state  );
  // console.log('store...', store);

  // 首屏数据>shouping_list  推荐阅读>brochure_article_right_top_list 左列表>brochure_article_list 文章分类>articleLabelList
  
  // 监听滚动
  const [show, switchShow] = useState(false); // 设置状态(控制隱藏顯示)
  const [LastTime, setLastTime] = useState(0); // 设置状态(保存上一次距離頂部的距離)
  useEffect(() => {
    const listener = () => {
      if (LastTime != parseInt(`${scrollY}`)) {
        switchShow(parseInt(`${scrollY}`) > LastTime)
        setLastTime(parseInt(`${scrollY}`))
      }
    }
    document.addEventListener("scroll", listener);
    return () => document.body.removeEventListener('scroll', listener); // 组件销毁后，取消监听
  }, [show, LastTime])

  let type;
  if(LastTime > 20){
    type = true
  } else {
    type = false;
  }
  

  
  const { shouping_list, brochure_article_right_top_list, brochure_article_list, articleLabelList } = useSelector((state: { brochureEffect: IBrochureArticleModelState }) => state.brochureEffect);
  useEffect(() => {
    // 左侧列表 
    dispatch({
      type: 'brochureEffect/get_brochure_knowledge_list'
    })
    // 推荐阅读
    dispatch({
      type: "brochureEffect/get_brochure_knowledge_right_list"
    })
    // 首屏数据
    dispatch({
      type: "brochureEffect/get_shouping_list"
    })
    // 文章分类数据
    dispatch({
      type: "brochureEffect/getArticleLabelList"
    })
  }, []);



  return (
    <div className={styles.knowledge} >
      <div className={styles.knowledge_center}>
        <div className={styles.knowledge_left}>
          <div className={styles.knowledge_left_list}>
            {/* 渲染 */}
            {
              brochure_article_list.map(item => {
                return <div className={cls(styles.knowledge_left_list_item)} key={item.id}>
                  <a href={`/brochure/brochureDetail/${item.id}`}>
                    <div className={styles.to_list_item_top}>
                      <b>{item.title}</b>
                    </div>
                    <div className={styles.to_list_item_buttom}>
                      <div className={styles.to_list_item_buttom_left}> 
                      </div>
                      
                    </div>
                  </a>
                </div>
              })
            }
          </div>
        </div>
        {/* 这里调用组件 */}
        <div className={styles.knowledge_right}>
          <ArticleListReadPage recommend={brochure_article_right_top_list} articlesLayer={shouping_list} articleLabel={articleLabelList} otherKnowledge={[]} />
        </div>
      </div>
    </div>
  );
}
